<template>
	<view class="index-wrap">
		<view class="index-wxml">
			<index-header :swiperList="swiperList" :showHot="showHot" @changeTab='changeTab'
				:changeColor="changeColor"></index-header>
			<view v-show="showHot">
				<film-swiper @closeMask="closeMask" :slideToCode="slideToCode"></film-swiper>
				<view class="scroll-ads" :style="{marginTop:titleBarHeight+statusBarHeight+125+'px'}">
					<u-icon name="volume-fill" color='#DD524D' />
					<swiper autoplay="true" scroll-y vertical="true" circular :interval="4000" class="ads">
						<swiper-item v-for="(item,index) in adList" :key="index">
							<view class="ads-item">
								{{item}}
							</view>
						</swiper-item>
					</swiper>
					<view style="display: flex;" @click="toMember">
						<text style="margin-right: 5rpx;">会员尊享</text>
						<u-icon name="arrow-right" color='#DD524D' />
					</view>
				</view>
				<film-session @getFutureFilm='getFutureFilm'></film-session>
			</view>
			<view v-show="!showHot" class="future-films-box">

				<view class="future-films" :class="futureFilmIndex==index?'active-film':''"
					v-for="(item,index) in futureFilm" :key="index" @click="toDetail(item,index)"
					@touchstart='()=>touchstart(index)' @touchend='touchend'>
					<view style="border-bottom: 1px solid #f0f0f5;">
						<view class="open-date">
							全国公映：{{item.PublishDate}}
						</view>
						<view class="film-info">
							<view>
								<img class="film-img" :src="item.Imageurl" alt="">
							</view>
							<view class="">
								<view class="film-name">
									{{item.FilmName}}
								</view>
								<view class="desc">
									{{item.Language}}/{{item.Duration}}分钟
								</view>
								<view class="desc">
									{{item.showType}}
								</view>
								<view class="desc">
									导演：{{item.Director}}
								</view>
								<view class="desc">
									演员：{{item.Cast}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading-mask" v-show="showMask"></view>
			<u-popup :show="showTips" mode="center" :round='10'>
				<view class="tips">
					<image :src="tipImg" mode="widthFix"></image>
					<u-button type="primary" shape='circle' style="width: 200rpx;"
						@click="showTips=false">我知道了</u-button>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import {
		getCardList,
		getCinemaConfig
	} from '../../common/http/api.js';
	import FilmSwiper from '../../components/index/FilmSwiper.vue'
	import IndexHeader from '../../components/index/IndexHeader.vue'
	import FilmSession from '../../components/index/FilmSession.vue'
	export default {
		components: {
			FilmSwiper,
			IndexHeader,
			FilmSession
		},
		data() {
			return {
				name: '',
				showBtn: false,
				showMask: true,
				cinemaInfo: {},
				swiperList: [],
				chainsList: [],
				showTips: false,
				tipImg: '',
				titleBarHeight: '',
				statusBarHeight: '',
				adList: [],
				showHot: true,
				futureFilm: [],
				futureFilmIndex: null,
				changeColor: false,
				slideToCode: ''
			}
		},
		methods: {
			changeTab(v) {
				this.showHot = v
			},
			touchstart(index) {
				this.futureFilmIndex = index
			},
			touchend() {
				this.futureFilmIndex = null
			},
			toDetail(item) {
				// uni.navigateTo({
				// 	url: "../../pages/filmInfo/filmInfo"
				// })
				// this.$store.commit('setFilmInfo', item)

				this.slideToCode = item.FilmCode
				this.showHot = !this.showHot

				setTimeout(() => {
					this.slideToCode = ''
				}, 500)
			},
			toMember() {
				getCardList(uni.getStorageSync("openId")).then(res => {
					const {
						code,
						data
					} = res
					if (code === "000") {

						uni.navigateTo({
							url: "../cardList/cardList"
						})

					} else if (code === "001") {
						uni.navigateTo({
							url: "../openCard/openCardList"
						})
					}
				})
			},
			getFutureFilm(films) {
				this.futureFilm = films
				console.log(this.futureFilm);
			},
			getConfig() {
				getCinemaConfig().then(res => {
					const {
						data,
						code
					} = res;
					if (code == "SUCCESS") {
						this.cinemaInfo = data
						this.$store.commit("setCinemaConfig", data);
						// this.swiperList.push(data.picture1, data.picture2, data.picture3)
						for (let key in data) {
							if (key.includes('picture')) {
								this.swiperList.push(data[key])
							}
						}
						this.tipImg = data.homeImage
						this.adList = data.rollAds.split('|')

					}
				})
			},
			closeMask() {
				this.showMask = false;
				this.handleTipTime();
			},
			handleTipTime() {
				const time = parseInt(uni.getStorageSync('tipTime'));
				const currentTime = new Date().getTime()
				if (!time) {
					this.showTips = true;
					uni.setStorageSync('tipTime', currentTime)
					setTimeout(() => this.showTips = false, 10000)
				} else {
					const result = currentTime - time;

					if (result > 300000) {
						this.showTips = true;
						uni.setStorageSync('tipTime', currentTime)
						setTimeout(() => this.showTips = false, 10000)
					} else {
						this.showTips = false;
					}
				}
			},


		},
		onLoad(options) {
			// console.log(tt.canIUse('createOrder.object.skuList.associateInfo.subcard'));
			// tt.createOrder({
			// 	skuList: [{
			// 		skuId: '1741284376396813', // sku 商品Id 必传
			// 		skuType: 2, // sku 商品类型 必传
			// 		quantity: 1, // 数量 必传
			// 		price:1290,
			// 		discountAmount:1290,
			// 		goodsInfo: {
			// 			goodsType: 2,
			// 			goodsId: '1741284376396813',
			// 			goodsName: '单人小食套餐', // 商品名称 必填
			// 			goodsPhoto: 'https://gimg2.baidu.com'
			// 		},
			// 		discountInfo: {
			// 			type: 1,
			// 			detail: {
			// 				deductInfo: { // 必传
			// 					discountCode: ['7423390471010205746'], // 必传，数组长度即为核销的券码张数，与外层quantity一致
			// 					poiId: '6601138350021675011', // 必传，核销门店
			// 					orderId: '1011893113571670327' // 必传，抖音原生主单订单号
			// 				}
			// 			}
			// 		}
			// 	}],
			// 	payment: {
			// 		totalAmount: 1290, // 订单总价 必填 10*1=10
			// 		totalDiscountAmount:1290
			// 	},
			// 	success: res => {
			// 		const {
			// 			orderId,
			// 			outOrderNo
			// 		} = res;
			// 		console.log('success res', res);
			// 		console.log('orderId', orderId, 'outOrderNo', outOrderNo);
			// 		this.setData({
			// 			orderId,
			// 			outOrderNo
			// 		});
			// 	},
			// 	fail: res => {
			// 		const {
			// 			orderId,
			// 			outOrderNo,
			// 			errNo,
			// 			errMsg,
			// 			errLogId
			// 		} = res;
			// 		if (errLogId) {
			// 			console.log('预下单失败', errNo, errMsg, errLogId);
			// 		}
			// 		if (orderId || outOrderNo) {
			// 			console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
			// 		}
			// 		console.log(errNo, errMsg)
			// 	},
			// });
			if (options.cinemaCode) {
				uni.setStorageSync('cinemaCode', options.cinemaCode)
				uni.setStorageSync('currentCityName', options.currentCity)
			}
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.getConfig();

			uni.$once('sysHeight', data => {
				this.titleBarHeight = data.titleBarHeight
				this.statusBarHeight = data.statusBarHeight
			})
		},
		onShareAppMessage() {
			const cinemaCode = uni.getStorageSync('cinemaCode', cinema.cinemaCode)
			const currentCityName = uni.getStorageSync('cinemaCode', cinema.currentCityName)
			return {
				path: `/pages/index/index?cinemaCode=${cinemaCode}&currentCityName=${currentCityName}`
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 135) {
				this.changeColor = true
			} else {
				this.changeColor = false
			}
		}
	}
</script>

<style lang="scss">
	.coustom-navbar {
		display: flex;
		justify-content: center;
	}

	.future-films-box {
		position: absolute;
		z-index: 9;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		top: 160px;
	}

	.film-box {
		position: fixed;
		top: 300rpx;
	}

	.loading-mask {
		width: 100vw;
		height: 100vh;
		background-color: #f0f0f5;
		position: absolute;
		left: 0;
		top: 0;
	}

	.future-films {

		padding: 5rpx 40rpx 5rpx 40rpx;



		.film-info {
			display: flex;
			margin-bottom: 20rpx;

			.film-name {
				padding-top: 5rpx;
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}

			.desc {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 5rpx;
			}
		}

		.open-date {
			padding: 20rpx 0;
			font-size: 26rpx;
		}

		.film-img {
			width: 150rpx;
			height: 210rpx;
			margin-right: 20rpx;
			border-radius: 15rpx;
		}
	}

	.active-film {
		background-color: #f0f0f5;
	}

	.open-card-tip {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		background-color: #f0f0f5;
		font-size: 28rpx;
		color: #DD524D;


		view {
			display: flex;
			align-items: center;
		}

		text {
			margin: 0 15rpx;
		}
	}

	.tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 15rpx;
		padding: 20rpx 20rpx 0 20rpx;

		image {
			width: 75vw;
			margin-bottom: 20rpx;
		}

		.confirm {
			width: 300rpx;
			font-size: 32rpx;

		}
	}

	.scroll-ads {
		display: flex;
		padding: 10rpx 30rpx;
		background-color: #f0f0f5;
		color: #DD524D;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;

		.ads {
			height: 60rpx;
			width: 60vw;
			margin-left: 20rpx;
			display: flex;
			align-items: center;

			.ads-item {
				height: 60rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
			}
		}
	}
</style>